<template>
<div>
  <el-dialog
    :title="title"
    width="1200%"
    :close-on-click-modal="false"
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
     <!--   <el-col :span="23">
            <el-form-item label="案件模板" prop="anjianMoudles.id"
                :rules="[
                 ]">
          <SelectTree
                      ref="anjianMoudles"
                      :props="{
                          value: 'id',             // ID字段名
                          label: 'name',         // 显示名称
                          children: 'children'    // 子级字段名
                        }"
                      url="/dqsy/muban/ffTrees/treeData"
                      :value="inputForm.anjianMoudles.id"
                      :clearable="true"
                      :accordion="true"
                      @getValue="(value) => {inputForm.anjianMoudles.id=value}"/>
           </el-form-item>
        </el-col> -->
        <el-col :span="23">
            <el-form-item label="修改案件名称" prop="anjianName"
                :rules="[
                 ]">
          <el-input type="text" v-model="inputForm.anjianName" placeholder="请填写案件名称"     ></el-input>
           </el-form-item>
           <p></p>
             <!--  <el-col :span="12">
                    <el-form-item label="证据是否齐全" prop="remarks"
                        :rules="[
                         ]">
                  <el-input :disabled="true" style="color: #000000;" type="text" v-model="inputForm.remarks" placeholder=""     ></el-input>
                   </el-form-item>
                </el-col> -->
        </el-col>
    <el-col :span="24">
     <el-form-item label-width="0">
           <el-tabs v-model="ffDataMainTab">
           <el-tab-pane v-if="this.inputForm.ffDataFaoqieList.length === 1"  label="盗窃罪证据校验">

                <el-table
                 :data="inputForm.ffDataFaoqieList.filter(function(item){ return item.delFlag !== '1'})"
                 @row-click="tishi"
                 style="height: 100%; width: 100%;">
                <el-table-column
                   fixed="left"
                   label="是否修改证据记录"
                   width="500"
                   height="0"
                   >
                   <template slot-scope="scope">
                     <el-button  @click="editFfDataFaoqieRow(scope.row)" type="info" size="small">是</el-button>
                     <el-button type="danger" size="small" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>否</el-button>
                   </template>
                 </el-table-column>
               </el-table>
             </el-tab-pane>


           <el-tab-pane v-if="this.inputForm.fdDataShangghaiList.length === 1" label= "故意伤害罪证据校验">
                 <!-- <el-button size="small" @click="addFdDataShangghaiRow" type="primary">新增</el-button> -->
                 <el-table
                 border
                  @row-click="tishi"
                 :data="inputForm.fdDataShangghaiList.filter(function(item){ return item.delFlag !== '1'})"
                 style="width: 100%">
                 <el-table-column
                   fixed="left"
                   label="是否修改证据记录"
                   width="500">
                   <template slot-scope="scope">
                     <el-button  @click="editFdDataShangghaiRow(scope.row)" type="info" size="small">是</el-button>
                     <el-button type="danger" size="small" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>否</el-button>
                   </template>
                 </el-table-column>
               </el-table>
             </el-tab-pane>

           <el-tab-pane v-if="this.inputForm.ffDataWeixianList.length === 1" label="危险驾驶罪证据校验">
                 <!-- <el-button size="small" @click="addFfDataWeixianRow" type="primary">新增</el-button> -->

                 <el-table
                 border
                 :data="inputForm.ffDataWeixianList.filter(function(item){ return item.delFlag !== '1'})"
                 style="width: 100%">
                 <el-table-column
                   fixed="left"
                   label="是否修改证据记录"
                   width="500">
                   <template slot-scope="scope">
                     <el-button  @click="editFfDataWeixianRow(scope.row)" type="info" size="small">是</el-button>
                     <el-button type="danger" size="small" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>否</el-button>
                   </template>
                 </el-table-column>
               </el-table>

             </el-tab-pane>

           <el-tab-pane v-if="this.inputForm.ffDataYanshiList.length === 1" label="掩饰隐瞒犯罪所得罪证据校验">
                 <!-- <el-button size="small" @click="addFfDataYanshiRow" type="primary">新增</el-button> -->
                 <el-table
                 border
                 :data="inputForm.ffDataYanshiList.filter(function(item){ return item.delFlag !== '1'})"
                 style="width: 100%">
                 <el-table-column
                   fixed="left"
                   label="是否修改证据记录"
                   width="500">
                   <template slot-scope="scope">
                     <el-button  @click="editFfDataYanshiRow(scope.row)" type="info" size="small">是</el-button>
                     <el-button type="danger" size="small" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>否</el-button>
                   </template>
                 </el-table-column>
               </el-table>
             </el-tab-pane>
           </el-tabs>
           </el-form-item>
          </el-col>
        </el-row>
    </el-form>
   <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span> -->
  </el-dialog>
  <FfDataFaoqieForm ref="ffDataFaoqieForm" @addRow="saveFfDataFaoqieRow(arguments)" @axx="gaveFfDataYanshiRow(arguments)" @values="values(arguments)"></FfDataFaoqieForm>
  <FdDataShangghaiForm ref="fdDataShangghaiForm" @addRow="saveFdDataShangghaiRow(arguments)" @axx="gaveFfDataYanshiRow(arguments)" @values="values(arguments)"></FdDataShangghaiForm>
  <FfDataWeixianForm ref="ffDataWeixianForm" @addRow="saveFfDataWeixianRow(arguments)" @axx="gaveFfDataYanshiRow(arguments)" @values="values(arguments)"></FfDataWeixianForm>
  <FfDataYanshiForm ref="ffDataYanshiForm" @addRow="saveFfDataYanshiRow(arguments)" @axx="gaveFfDataYanshiRow(arguments)" @values="values(arguments)"></FfDataYanshiForm>
</div>
</template>

<script>
  import FfDataFaoqieForm from './FfDataFaoqieForm'
  import FdDataShangghaiForm from './FdDataShangghaiForm'
  import FfDataWeixianForm from './FfDataWeixianForm'
  import FfDataYanshiForm from './FfDataYanshiForm'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        ffDataMainTab: '0',
        inputForm: {
          id: '',
          put: '',
          putone: '',
          puttwo: '',
          putthree: '',
          putfour: '',
          putfive: '',
          putsix: '',
          putselven: '',
          puteight: '',
          putnine: '',
          putten: '',
          puteleven: '',
          puttwelve: '',
          putthirteen: '',
          yput: '',
          yputone: '',
          yputtwo: '',
          yputthree: '',
          yputfour: '',
          yputfive: '',
          yputsix: '',
          yputselven: '',
          yputeight: '',
          yputnine: '',
          yputten: '',
          yputeleven: '',
          yputtwelve: '',
          yputthirteen: '',
          yputfourteen: '',
          yputfiveteen: '',
          jput: '',
          jputone: '',
          jputtwo: '',
          jputthree: '',
          jputfour: '',
          jputfive: '',
          jputsix: '',
          jputselven: '',
          jputeight: '',
          jputnine: '',
          jputten: '',
          jputeleven: '',
          jputtwelve: '',
          jputthirteen: '',
          jputfourteen: '',
          jputfiveteen: '',
          wput: '',
          wputone: '',
          wputtwo: '',
          wputthree: '',
          wputfour: '',
          wputfive: '',
          wputsix: '',
          wputselven: '',
          wputeight: '',
          wputnine: '',
          wputten: '',
          wputeleven: '',
          wputtwelve: '',
          wputthirteen: '',
          wputfourteen: '',
          wputfiveteen: '',
          ffDataFaoqieList: [],
          fdDataShangghaiList: [],
          ffDataWeixianList: [],
          ffDataYanshiList: [],
          anjianMoudles: {
            id: ''
          },
          anjianName: '',
          remarks: ''
        }
      }
    },
    watch: {
      // 路径改变时候 关闭组件bug
      $route (newVal, oldVal) {
        this.visible = false
      }
    },
    components: {
      SelectTree,
      FfDataFaoqieForm,
      FdDataShangghaiForm,
      FfDataWeixianForm,
      FfDataYanshiForm
    },
    methods: {
      gaveFfDataYanshiRow (k) {
        // console.log(k[0])
          this.inputForm.remarks = k[0]
      },
      init (method, id) {
        this.method = method
        if (method === 'add') {
          this.title = `新建证据校验`
        } else if (method === 'edit') {
          this.title = '修改证据校验'
        } else if (method === 'view') {
          this.title = '查看证据校验'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          this.inputForm.id = id
          this.ffDataMainTab = '0'
          this.inputForm.ffDataFaoqieList = []
          this.inputForm.fdDataShangghaiList = []
          this.inputForm.ffDataWeixianList = []
          this.inputForm.ffDataYanshiList = []
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/dqsy/zhengjuxiaoyan/ffDataMain/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.ffDataMain)
              this.loading = false
            })
          }
        })
      },
      values (value) {
        if (value[0] === 1) {
          this.doSubmit()
        }
      },
      saveFfDataFaoqieRow (child) {
        console.log(child)
        if (child[0] === '') {
          this.inputForm.ffDataFaoqieList.push(child[1])
        } else {
          this.inputForm.ffDataFaoqieList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.ffDataFaoqieList.splice(index, 1, child[1])
            }
          })
        }
      },
      addFfDataFaoqieRow (child) {
        this.$refs.ffDataFaoqieForm.init('add')
      },
      viewFfDataFaoqieRow (child) {
        this.$refs.ffDataFaoqieForm.init('view', child)
      },
      editFfDataFaoqieRow (child) {
        this.$refs.ffDataFaoqieForm.init('edit', child)
      },
      delFfDataFaoqieRow (child) {
        this.inputForm.ffDataFaoqieList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.ffDataFaoqieList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.ffDataFaoqieList.splice(index, 1, item)
          }
        })
      },
      saveFdDataShangghaiRow (child) {
        if (child[0] === '') {
          this.inputForm.fdDataShangghaiList.push(child[1])
        } else {
          this.inputForm.fdDataShangghaiList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.fdDataShangghaiList.splice(index, 1, child[1])
            }
          })
        }
      },
      addFdDataShangghaiRow (child) {
        this.$refs.fdDataShangghaiForm.init('add')
      },
      viewFdDataShangghaiRow (child) {
        this.$refs.fdDataShangghaiForm.init('view', child)
      },
      editFdDataShangghaiRow (child) {
        this.$refs.fdDataShangghaiForm.init('edit', child)
      },
      delFdDataShangghaiRow (child) {
        this.inputForm.fdDataShangghaiList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.fdDataShangghaiList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.fdDataShangghaiList.splice(index, 1, item)
          }
        })
      },
      saveFfDataWeixianRow (child) {
        if (child[0] === '') {
          this.inputForm.ffDataWeixianList.push(child[1])
        } else {
          this.inputForm.ffDataWeixianList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.ffDataWeixianList.splice(index, 1, child[1])
            }
          })
        }
      },
      addFfDataWeixianRow (child) {
        this.$refs.ffDataWeixianForm.init('add')
      },
      viewFfDataWeixianRow (child) {
        this.$refs.ffDataWeixianForm.init('view', child)
      },
      editFfDataWeixianRow (child) {
        this.$refs.ffDataWeixianForm.init('edit', child)
      },
      delFfDataWeixianRow (child) {
        this.inputForm.ffDataWeixianList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.ffDataWeixianList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.ffDataWeixianList.splice(index, 1, item)
          }
        })
      },
      tishi (k) {
        console.log(this.inputForm.fdDataShangghaiList.length)
          console.log(this.inputForm.ffDataFaoqieList.length)
      },
      saveFfDataYanshiRow (child) {
        if (child[0] === '') {
          this.inputForm.ffDataYanshiList.push(child[1])
        } else {
          this.inputForm.ffDataYanshiList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.ffDataYanshiList.splice(index, 1, child[1])
            }
          })
        }
      },
      addFfDataYanshiRow (child) {
        this.$refs.ffDataYanshiForm.init('add')
      },
      viewFfDataYanshiRow (child) {
        this.$refs.ffDataYanshiForm.init('view', child)
      },
      editFfDataYanshiRow (child) {
        this.$refs.ffDataYanshiForm.init('edit', child)
      },
      delFfDataYanshiRow (child) {
        this.inputForm.ffDataYanshiList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.ffDataYanshiList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.ffDataYanshiList.splice(index, 1, item)
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          console.log(valid)
          if (valid) {
            this.loading = true
            this.$http({
              url: `/dqsy/zhengjuxiaoyan/ffDataMain/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              this.loading = false
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    }
  }
</script>
